<template>
	<view scroll-y class="analyse-wrapper">
		<custom-header-bar backStatus="1" title="步数" bg="1"></custom-header-bar>
		<div class="content-box">
			<div class="chart-wrapper">
				<div class="select-wrapper">
					<div class="item 1" :class="{ active: timeType === 'day' }" @click="handleClickTime('day')">
						天
					</div>
					<div class="item" :class="{ active: timeType === 'week' }" @click="handleClickTime('week')">
						周
					</div>
					<div class="item" :class="{ active: timeType === 'month' }" @click="handleClickTime('month')">
						月
					</div>
				</div>
				<div class="chart" :style="{height:heightStyle}">
					<qiun-data-charts type="bar" :ontouch="true" :opts="opts2" :chartData="chartData2" />
				</div>
			</div>
		</div>
		<u-popup :show="perwarnShow" mode="center" round="18" :closeable="true" @close="perwarnShow=false">
			<div class="perwarn-popup">
				<div class="title">运动步数报警说明</div>
				<div class="content">
					<div class="text">运动基数为3000步，高于3600步和低于2400步数时报警</div>
				</div>
				<div class="content">
					<div class="text">此数据仅供参考</div>
				</div>
			</div>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations
	} from "vuex"
	import {
		AnalyseType
	} from "@/utils/DICT.js";
	import storage from "@/utils/storage";
	import CustomHeaderBar from "@/components/custom-header-bar.vue";
	import {
		getStepCount,
		getNum,
	} from "@/api/analyse";
	import {
		WriteBlueTooth
	} from "@/utils/BLE.js"
	import {
		WEEK
	} from "@/utils/DICT.js"
	import dayjs from "dayjs"
	export default {
		components: {
			CustomHeaderBar,
		},
		data() {
			return {
				heightStyle: '450px',
				stepresult: {}, // 计步结果
				stepLevel: '',
				perwarnShow: false,
				jibuState: false,
				opts2: {
					color: ["#82d8cf"],
					padding: [0, 15, 15, 5],
					dataLabel: true,
					legend: {
						position: "top",
						margin: 30,
					},
					xAxis: {
						fontColor: "rgba(0, 0, 0, 0.35)",
						axisLine: true,
						axisLineColor: "rgba(0, 0, 0, 0.06)",
						itemCount: 5,
						splitNumber: 5,
						gridColor: "#eeeeee",
						rotateLabel: true,
					},
					yAxis: {
						showTitle: false,
					},
					extra: {
						bar: {
							width: 16
						},
						column: {
							type: "stack",
							width: 16,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							barBorderCircle: true,
							barBorderRadius: [24, 24, 24, 24],
						},
					},
				},
				chartData2: {},
				timeType: "day",
				loading: false,
				alertNum: 0,
				progress: {},
				deviceId: ""
			};
		},
		onLoad(options) {
			const Step = {
				min: 0,
				max: 6000,
				interval: 6000,
				list: [2700, 600, 2700],
			};
			this.progress = Step;
			this.type = options.type;
			this.deviceId = storage.getCurrentDevice().deviceId;
      // this.deviceId = 'F7:A4:E7:0C:70:A5'// 测试id
      console.log('this.deviceId',this.deviceId)
			// || 'C2:38:1F:39:ED:A2'
			// || 'F7:A4:E7:0C:70:A5'
			// || 'C0:1C:22:96:EA:9E'
			// || '23482F5E-BC8A-27C5-0171-39B0A07FC79C'
			this.title = AnalyseType[this.type];
			this.getStepCount();
			this.getNum()
		},
		computed: {
			...mapGetters(["StepCounting", "BlueBodyInfo", "UserInfo"]),
			pointPosition() {
				let num = this.progress.total - this.progress.min;
				let interval = this.progress.interval;
				num = (num / interval) * 100;
				if (num > 100) num = 100;
				if (num < 0) num = 0;
				return num;
			},
		},
		methods: {
			...mapMutations(["SetStepCounting"]),
			getNum() {
				getNum({
					prewarnHealthType: 'numStep'
				}).then((res) => {
					if (res.data.code === 200) {
						this.alertNum = res.data.total;
					}
				});
			},
			// 步数
			getStepCount() {
				// this.chartData2 = {}
				getStepCount({
						deviceId: this.deviceId,
						type: this.timeType,
					}).then((res) => {
						console.log(res)
						res = res.data;
						let xAxis = [];
						let series = [];
						this.heightStyle = Math.max(res.data.list.length * 40, 450) + 'px'
						res.data.list.forEach((item) => {
							if (this.timeType === "day") {
								xAxis.push(item.newTime.split(" ")[1] + ":00");
							} else if (this.timeType === 'week') {
								xAxis.push(WEEK[dayjs(item.newTime).day()]);
							} else if (this.timeType === 'month') {
								xAxis.push(dayjs(item.newTime).format('MM/DD'));
							} else {
								xAxis.push(dayjs(item.newTime).format('MM'));
							}
							series.push(Number(item.step));
						});
						let stepList = [...series]
						stepList.sort(function(a, b) {
							return a - b
						})
						let max = stepList[stepList.length - 1]
						max = Math.ceil(max * 1.2 / 100) * 100

						setTimeout(() => {
							let params = {
								categories: xAxis,
								series: [{
									name: "步数",
									data: series,
								}],
							}
							if (xAxis.length === 0) {
								params = {
									categories: [' '],
									series: [{
										name: "步数",
										data: series,
									}],
								}
							}
							this.opts2.xAxis.max = max
							this.chartData2 = JSON.parse(JSON.stringify(params))

						}, 30)

						this.loading = false;
					})
					.catch((err) => {
						this.loading = false;
					});
			},
			handleClickTime(type) {
				console.log(type);
				this.timeType = type;
				this.getStepCount();
			},
		},
	};
</script>

<style lang="scss">
	.analyse-wrapper {
		padding-top: 160upx;
		box-sizing: border-box;
		background-color: #f4f4f4ff;

		.content-box {
			padding: 24upx 24upx 24upx 24upx;
		}

		.chart-wrapper {
			margin-top: 24upx;
			position: relative;
			padding-top: 40upx;
			background: #ffffff;
			box-shadow: 0px 0px 14upx 1px rgba(0, 0, 0, 0.1);
			border-radius: 30upx 30upx 30upx 30upx;

			.select-wrapper {
				display: flex;
				justify-content: flex-end;

				.item {
					margin: 0 12upx;
					width: 90upx;
					height: 52upx;
					line-height: 52upx;
					text-align: center;
					background: rgba(237, 240, 244, 0.3);
					border-radius: 0px 0px 0px 0px;
					color: #00000059;

					&.active {
						color: #ff980fff;
					}
				}
			}

			.chart {
				height: 400px;
			}
		}
	}
</style>
